<template>
	<view class="management_case">
		<view class="manage_box">
			<!-- 案件描述 -->
			<view class="uni-banner">
				<view class="uni-banner-con">案件描述：</view>
				<view class="uni-banner-Description">
					<textarea type="text" v-model="eventDescribe" maxlength="250" placeholder="请输入案件描述"/>
					<P style="color: #A40000; font-size: 24rpx; ">*描述字数限制250字，剩余字数{{eventDescribe.length}}/250</P>
				</view>
			</view>

			<!-- 相机 -->
			<view class="uni-Camera">
				<view class="uni-Camera-zero" @click="takePictures">
					<image src="../../static/icon_b1ogyrvee2o/xiangji.png" mode=""></image>
				</view>
			</view>
			<view class="uni-form-item uni-column" v-if="imagesArr && imagesArr.length > 0">
				<view class="item-value-camera">
					<view class="image-box" v-for="(item, index) in imagesArr" :key="index">
						<image class="selectImg" :src="item" mode="aspectFit" alt="" @click="showImage(item)">
						<i class="closeImg" @click="deleteImg(index)"></i>
					</view>
				</view>
			</view>

			<P style="color: #A40000; font-size: 24rpx;margin-top: 20rpx; ">*请在拍照时，确保事件的环境位置关系与拍摄全景，如一张照片无法表现时，可拍摄多张！</P>

			<!-- 案件缓办 -->
			<view class="uni-report" @click="showAlert(11)">
				<image src="../../static/city-manage/report.png"></image>
				<view>提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getisCheckHbCase} from '@/api/my_task.js'
	import URL from '../../util/url.js'
	export default{
		data(){
			return {
				//用户登录信息
				userInfo: uni.getStorageSync('userInfo'),
				imagesArr:[],
				eventId:'',
				//案件的坐标
				gdx:'',
				gdy:'',
				//案件描述
				eventDescribe: '',
				//案件图片
				paramsImages:[],
				//当前处置人员位置
				currentx:'',
				currenty:'',
				currentAddress:'',
				//判断当前是从哪进的
				current_handing_type:''
			}
		},
		onLoad(options){
			//判断当前是从哪进的
			this.current_handing_type = options.current_handing_type;
			this.currentAddress = '';
			//案件位置
			this.eventId = options.eventId;
			this.gdx = options.gdx;
			this.gdy = options.gdy;

			// 修改页面标题
			if(this.current_handing_type == 11){
				uni.setNavigationBarTitle({
					title: '案件缓办'
				});
			}

		},
		onShow(){
			//处置人员当前位置信息
			let currentLocation = uni.getStorageSync('currentLocation');
			this.currentx = currentLocation.currentx;
			this.currenty = currentLocation.currenty;
			this.currentAddress = currentLocation.currentAddress;
		},
		methods:{
			//案件缓办提交按钮
			showAlert(type){
				if(this.current_handing_type == 11){
					if(this.paramsImages.length == 0){
						this.$tip.toast('请选择图片或进行拍照');
						return;
					}
					if(this.eventDescribe == ''){
						this.$tip.toast('请输入案件描述');
						return;
					}
				}
				let _this = this, options = {};
				var images = JSON.stringify(this.paramsImages);
				options = {
					remark: _this.eventDescribe,//处置描述
					eventId:_this.eventId,
					params:{
						images: images,//处理前照片
					},
				}
				getisCheckHbCase(options).then((res) => {
					if(res.code === 200){
						this.$tip.toast('提交成功', ()=>{
							setTimeout(()=> {
								uni.navigateBack({
									delta: 1 // 返回上一级页面。
								})
							},1000)
						});
					}else{
						this.$tip.toast(res.msg);
					}
				}).catch((error) => {
				})
			},
			//调手机相册或相机
			takePictures(){
				let _this = this;
				// 选择图片
				uni.chooseImage({
					count: 100, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: function (res) {
						res.tempFilePaths.forEach( item => {
							_this.imagesArr.push(item);
							_this.detailImage( item, (data)=>{
								//base64 图片内容就是  data
								//截取base64前面的字符串
								let index = data.indexOf(",")
								data = data.substring(index+1);
								_this.paramsImages.push({"image":data});
							})
						});
						// 预览图片
						uni.previewImage({
							urls: res.tempFilePaths,
							longPressActions: {
								success: function(data) {
								},
								fail: function(err) {

								}
							}
						});
					}
				});
			},
			//点击图片放大
			showImage(item){
				let _this = this;
				uni.previewImage({
					urls: _this.imagesArr,
					current: item,
					longPressActions: {
						//itemList: ['发送给朋友', '保存图片', '收藏'],//按钮的文字数组
						success: function(data) {
						},
						fail: function(err) {
						}
					}
				});
			},
			// 删除本地图片：未上传
			deleteImg(index){
				this.imagesArr.splice(index, 1);
				this.imagesFile.splice(index,1);
			},
			// 图片转换为base64：H5和App
			detailImage(path, callback) {
				// #ifdef APP-PLUS
				plus.io.resolveLocalFileSystemURL(path, function(entry) {
					entry.file(function(file) {
						var fileReader = new plus.io.FileReader();
						//alert("getFile:" + JSON.stringify(file));
						fileReader.readAsDataURL(file);
						fileReader.onloadend = function(evt) {
							callback(evt.target.result);
						}
					})
				})
				// #endif


				// #ifdef H5
				var img = new Image();
				img.src = path;
				img.onload = function() {
					//默认按比例压缩
					var w = this.width,
						h = this.height;
					var quality = 0.95; // 默认图片质量为0.7

					//生成canvas
					var canvas = document.createElement('canvas');
					var ctx = canvas.getContext('2d');

					// 创建属性节点
					canvas.setAttribute("width", w);
					canvas.setAttribute("height", h);

					ctx.drawImage(this, 0, 0, w, h);
					// quality值越小，所绘制出的图像越模糊
					var base64 = canvas.toDataURL('image/jpeg', quality);
					// 回调函数返回base64的值
					callback(base64);
				};
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	.management_case{
		height: calc(100% - 48rpx);
		margin:0 auto;
		background: #fff;
		.manage_box{
			height: calc(100% - 120rpx);
			padding: 46rpx;
		}
		.uni-banner{
			width: 100%;
			margin-top: 10rpx;
			position: relative;
			display: flex;
			margin-bottom: 30rpx;
			.uni-banner-con{
				height: 60rpx;
			}
			.search-antext{
				border: 2rpx solid #ccc;
				height: 60rpx;
				border-radius: 10rpx;
				font-size: 28rpx;
				padding-left: 10rpx;
				padding-right: 80rpx;
			}
			/deep/.uni-input-input{
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
			.uni-header-icon{
				width: 72rpx;
				height: 56rpx;
				position: absolute;
				top: 4rpx;
				right: -12rpx;
				image{
					width: 70%;
					height: 90%;
				}
			}
			.uni-banner-Description{
				width: calc(100% - 140rpx);
				textarea{
					width:calc(100% - 24rpx);
					height: 200rpx;
					border: 2rpx solid #ccc;
					border-radius: 10rpx;
					font-size: 28rpx;
					padding: 0 10rpx;
				}
			}
		}
		.uni-Camera{
			width: 100%;
			display: flex;
			justify-content: center;
			.uni-Camera-zero{
				width: 145rpx;
				height: 145rpx;
				border-radius: 50%;
				background-color: #E5E5E5;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 88rpx;
					height: 88rpx;
				}
			}
		}
		.uni-column{
			.item-value-camera {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
			}
			//显示上传图片
			.image-box{
				width: 31%;
				height: 90px;
				border: 1px solid #ccc;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 2%;
				margin-bottom: 2.5%;
				position: relative;
				&:nth-of-type(3n){
						margin-right: 0;
				}
				uni-image{
					width: 100%;
					height: 100%;
				}
				.closeImg{//带_的是微信小程序的样式
					position: absolute;
					top: -6px;
					right: -6px;
					width: 16px;
					height: 16px;
					background: red;
					border-radius: 50%;
					line-height: 13px;
					text-align: center;
					&:before{
						content: '×';
						color: #fff;
					}
				}
			}
		}
		.uni-report{
			width: 520rpx;
			height: 80rpx;
			background: linear-gradient(to right, #ee625f, #ae0909);
			border-radius: 80rpx;
			position: absolute;
			left: 120rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
			font-size: 32rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width:52rpx;
				height:52rpx;
				margin-right: 20rpx;
			}
		}
		.pending_buttons{
			display: flex;
			justify-content: space-between;
			button{
				margin:0;
				flex:1;
				color:#fff;
				border-radius: 0;
				background: linear-gradient(to right, #ee625f, #ae0909);
				&::after{
					border:none;
				}
			}
		}
	}
</style>
